import React from 'react';
import {Button, Flex} from "antd";
import { Input } from 'antd';

import { PlusOutlined,RedoOutlined } from '@ant-design/icons';
import './TableToolbar.css';
import {Link} from "react-router-dom";
import TableToolbarProps from "./TableToolbarProps";
const { Search } = Input;

/**
 * Table数据表格 工具栏
 * @constructor
 */
const TableToolbar = (props: TableToolbarProps ) => {
    const search = (
        <Search
            addonBefore={props.searchBefore}
            placeholder={props.searchPlaceholder}
            allowClear
            enterButton
            onSearch={props.onSearch}
        />
    ) ;
    return (
        <Flex
            className={"table-toolbar-container"}
            gap={"small"}
            wrap={"nowrap"}
            align={"center"}
            justify={"space-between"}
        >
            <div className={"table-toolbar-left"}>
                <div className={"table-toolbar-tip"}>{props.titleTipText || "数据总量"}</div>
                <div className={"table-toolbar-context"}>{props.titleContent || 0 }</div>
            </div>
            <Flex
            gap={"small"}
            >
                {props.showSearch && search}
                <Button icon={<RedoOutlined spin={props.spin}/>} onClick={props.refresh}>{ props.refreshText || "刷新" }</Button>
                <Button type={"primary"}>
                    <Link key={"toolbar-add-data"} to={props.to || "./add"} state={props.linkState}><PlusOutlined />{ props.addText || " 添加数据" }</Link>
                </Button>
            </Flex>

        </Flex>
    );
};

export default TableToolbar;